<template>
  <div>
    <!--头部-->
    <dx-header></dx-header>
    <!--banner-->
    <detail-banner :List="bannerImg"></detail-banner>
    <!--介紹-->
    <detail-intro :IntroObj="introObj"></detail-intro>
    <!--推介課程-->
    <detail-recommend :List="recommendList"></detail-recommend>
    <!--尾部-->
    <dx-footer></dx-footer>
  </div>
</template>

<script>
  import DxHeader from 'common/header/header'
  import DxFooter from 'common/footer/footer'
  import DetailBanner from './component/banner'
  import DetailIntro from './component/intro'
  import DetailRecommend from './component/recommends'
  export default {
    name: 'Detail',
    components: {
      DxHeader,
      DxFooter,
      DetailBanner,
      DetailIntro,
      DetailRecommend
    },
    data () {
      return {
        bannerImg: [],
        introObj: {
          professionName: '',
          professionContent: ''
        },
        recommendList: []
      }
    },
    methods: {
      getDetailInfo () {
        this.$axios.get('/website/home/getProfessionDetail/' + this.$route.params.professionId)
          .then(this.handleGetDataSucc)
      },
      handleGetDataSucc (res) {
        res = res.data
        if (res.data) {
          const data = res.data
          this.bannerImg.push(data.bannerPicUrl)
          this.introObj.professionContent = data.professionContent
          this.introObj.languageName = data.languageName
          this.introObj.professionName = data.professionName
          this.recommendList = data.list
        }
      }
    },
    mounted () {
      this.getDetailInfo()
    },
    activated () {
    }
  }
</script>

<style lang="stylus" scoped>
  .content
    height: 50rem
</style>
